@font-face {
    font-family: 'SIMHEI';
    src: url('~@/assets/fonts/simhei.TTF');
}

@font-face {
    font-family: 'SourceHanSansCNLight';
    src: url('~@/assets/fonts/SourceHanSansCN-Light.otf');
}
@font-face {
    font-family: 'SourceHanSansCNMedium';
    src: url('~@/assets/fonts/SourceHanSansCN-Medium.otf');
}
@font-face {
    font-family: 'SourceHanSansCNNormal';
    src: url('~@/assets/fonts/SourceHanSansCN-Normal.otf');
}
@font-face {
    font-family: 'SourceHanSansCNRegular';
    src: url('~@/assets/fonts/SourceHanSansCN-Regular.otf');
}

/* 整个滚动条 */
::-webkit-scrollbar {
    width: 12px;               /* 滚动条的宽度 */
    height: 12px;              /* 滚动条的高度，对水平滚动条有效 */
    background-color: #f9f9fd; /* 滚动条的背景颜色 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #e1e1e1; /* 轨道的背景颜色 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #c1c1c1; /* 滑块的背景颜色 */
    border: 3px solid #e1e1e1; /* 滑块的边框和轨道相同的颜色，可以制造“边距”的效果 */
}

/* 滚动条滑块：悬停效果 */
::-webkit-scrollbar-thumb:hover {
    background-color: #a8a8a8; /* 滑块的悬停颜色 */
}

/* 滚动条滑块：激活时的效果 */
::-webkit-scrollbar-thumb:active {
    background-color: #888888; /* 滑块的激活颜色 */
}

/* 滚动条按钮（上下箭头） */
::-webkit-scrollbar-button {
    display: none; /* 通常情况下不显示滚动条按钮 */
}

/* Firefox */
html {
    scrollbar-width: thin; /* "auto" | "thin" | "none" */
    scrollbar-color: #c1c1c1 #e1e1e1; /* 滑块颜色 轨道颜色 */
}

/* fade */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.28s;
}
.fade-enter,
.fade-leave-active {
    opacity: 0;
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
    transition: all 0.5s;
}
.fade-transform-enter {
    opacity: 0;
    transform: translateX(-30px);
}
.fade-transform-leave-to {
    opacity: 0;
    transform: translateX(30px);
}

.page {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 15px 15px 10px 15px;
    background: #fff;
    overflow: auto;
    .search-container {
        width: 100%;
        height: 50px;
    }
    .table-container {
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        .table-toolbar {
            width: 100%;
            height: auto;
            padding: 5px;
            border: 1px solid #ebeef5;
            border-bottom: 0;
        }
        .table-content {
            width: 100%;
            flex: 1;
        }
    }
    .table-pagination {
        width: 100%;
        height: 45px;
    }
}

